<script setup>
import { getAttrInfoAPI } from '@/api/product/attr'
import { getSpuImageListAPI, getSpuSaleAttrListAPI, addSkuAPI } from '@/api/product/spu'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const emits = defineEmits(['changeScene'])

const cancel = () => {
  emits('changeScene', {flag: 0, mode: 'update'})
}

const attrArr = ref([])

const saleArr = ref([])

const imgArr = ref([])

// 收集sku的参数，用于上传
let skuParams = ref({
  // 通过传参收集
  category3Id: '', //三级分类的id
  spuId: '',
  tmId: '',
  // 通过v-model收集
  skuName: '',
  price: '',
  weight: '',
  skuDesc: '',
  // 通过请求收集
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})

const initSkuData = async (c1Id, c2Id, c3Id, spu) => {
  // 收集数据
  skuParams.value.category3Id = spu.category3Id
  skuParams.value.skuId = spu.id
  skuParams.value.tmId = spu.tmId
  let res = await getAttrInfoAPI(c1Id, c2Id, c3Id)
  let res1 = await getSpuImageListAPI(spu.id)
  let res2 = await getSpuSaleAttrListAPI(spu.id)
  attrArr.value = res.data
  saleArr.value = res2.data
  imgArr.value = res1.data
}

// 获取table组件实例
const table = ref()

// 设置默认图片的方法回调
const handler = (row) => {
  // 点击的时候，先让所有的复选框不勾选
  table.value.clearSelection()

  // 选中的这一行再勾选
  table.value.toggleRowSelection(row, true)
  skuParams.value.skuDefaultImg = row.imgUrl
}

// 保存按钮的方法
const save = async () => {
  // 整理参数
  // 平台属性
  skuParams.value.skuAttrValueList = attrArr.value.reduce((prev, next) => {
    if(next.attrIdAndValueId) {
      const [attrId, valueId] = next.attrIdAndValueId.split(':')
      prev.push({
        attrId,
        valueId
      })
    }
    return prev
  }, [])
  // 销售属性
  skuParams.value.skuSaleAttrValueList = saleArr.value.reduce((prev, next) => {
    if(next.saleIdAndValueId) {
      const [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(':')
      prev.push({
        saleAttrId,
        saleAttrValueId
      })
    }
    return prev
  }, [])
  // 发请求
  let res = await addSkuAPI(skuParams.value)
  // 成功
  if(res.code === 200) {
    ElMessage({
      type: 'success',
      message: '添加SKU成功'
    })
    // 通知父组件切换场景
    emits('changeScene', {flag: 0, mode: 'update'})
  } else {
    ElMessage({
      type: 'error',
      message: '添加SKU失败'
    })
  }
  // 失败
}

defineExpose({
  initSkuData
})
</script>

<template>
  <el-form label-width="100px">
    <el-form-item label="SKU名称">
      <el-input placeholder="sku名称" v-model="skuParams.skuName"/>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input placeholder="价格(元)" type="number" v-model="skuParams.price"/>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input placeholder="重量(g)" type="number" v-model="skuParams.weight"/>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input placeholder="SKU描述" type="textarea" v-model="skuParams.skuDesc"/>
    </el-form-item>
    <el-form-item label="平台属性">

      <el-form :inline="true">
        <el-form-item v-for="(item) in attrArr" :key="item.id" :label="item.attrName" style="margin: 5px 0;" label-width="120px">
          <el-select placeholder="请选择" style="width: 250px;" v-model="item.attrIdAndValueId">
            <el-option :value="`${item.id}:${attrValue.id}`" v-for="attrValue in item.attrValueList" :key="attrValue.id" :label="attrValue.valueName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

    </el-form-item>
    
    <el-form-item label="销售属性">
      <el-form>
        <el-form-item v-for="item in saleArr" :key="item.id" :label="item.saleAttrName">
          <el-select placeholder="请选择" style="width: 250px;" v-model="item.saleIdAndValueId">
            <el-option :value="`${item.id}:${saleAttrValue.id}`" v-for="saleAttrValue in item.spuSaleAttrValueList" :key="saleAttrValue.id" :label="saleAttrValue.saleAttrValueName"></el-option>
          </el-select>
        </el-form-item>
        
      </el-form>
    </el-form-item>

    <el-form-item label="图片名称">
      <el-table border :data="imgArr" ref="table">
        <el-table-column type="selection" align="center" width="80"/>
        <el-table-column label="图片">
          <template #default="{row}">
            <img :src="row.imgUrl" style="width: 100px;height: 100px;" alt="">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button :type="skuParams.skuDefaultImg === row.imgUrl ? 'warning' : 'primary'" @click="handler(row)">{{skuParams.skuDefaultImg === row.imgUrl ? '默认图片' : '设置默认'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" size="default" @click="save">保存</el-button>
      <el-button size="default" @click="cancel">取消</el-button>
      
    </el-form-item>
    
    
  </el-form>
</template>

<style scoped>

</style>
